<!doctype html>
<html class="no-js" lang="zxx">
<head>
    <meta charset="utf-8">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <title>Photographer | Tools</title> <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="shortcut icon" type="image/x-icon" href="assets/img/icon/favicon.png">

    <link rel="stylesheet" href="assets/css/bootstrap.min.css">
    <link rel="stylesheet" href="assets/css/owl.carousel.min.css">
    <link rel="stylesheet" href="assets/css/slicknav.css">
    <link rel="stylesheet" href="assets/css/animate.min.css">
    <link rel="stylesheet" href="assets/css/magnific-popup.css">
    <link rel="stylesheet" href="assets/css/fontawesome-all.min.css">
    <link rel="stylesheet" href="assets/css/themify-icons.css">
    <link rel="stylesheet" href="assets/css/slick.css">
    <link rel="stylesheet" href="assets/css/nice-select.css">
    <link rel="stylesheet" href="assets/css/style.css">

    <script src="https://cdn.tailwindcss.com"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/qrcodejs/1.0.0/qrcode.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/jsbarcode@3.11.5/dist/JsBarcode.all.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.4.1/html2canvas.min.js"></script>
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;700&family=Noto+Sans+SC:wght@400;500;700&display=swap" rel="stylesheet">
    <style>
        /* This style block is for the ticket generator only and won't affect your site */
        #ticket-generator-wrapper {
            font-family: 'Inter', 'Noto Sans SC', sans-serif;
            background-color: #ffffff; /* Set a neutral background for the container inside your site */
        }
        /* --- General Styles --- */
        .generator-section {
            width: 100%;
            max-width: 1000px;
            margin: 0 auto 4rem auto; /* Centered with margin-auto */
        }
        .generator-title {
            font-size: 1.75rem;
            font-weight: bold;
            text-align: center;
            color: #334155;
            margin-bottom: 0.5rem;
        }
        .generator-subtitle {
            text-align: center;
            color: #64748b;
            margin-bottom: 1.5rem;
        }
        [contenteditable="true"] {
            outline: none;
            padding: 2px 4px;
            border-radius: 4px;
            transition: background-color 0.2s, box-shadow 0.2s;
        }
        [contenteditable="true"]:focus {
            background-color: rgba(59, 130, 246, 0.1);
            box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.5);
        }

        /* --- High-Speed Rail Ticket Styles --- */
        .hsrc-ticket-container {
            position: relative;
            width: 100%;
            max-width: 800px;
            margin: 0 auto;
            aspect-ratio: 800 / 470;
            background-image: linear-gradient(to bottom, rgb(208, 227, 233) 0%, rgb(208, 227, 233) 90%, rgb(154, 195, 217) 90%, rgb(154, 195, 217) 100%);
            background-size: cover;
            background-position: center;
            background-repeat: no-repeat;
            box-shadow: 0 10px 25px rgba(0,0,0,0.1);
            border-radius: 12px;
            overflow: hidden;
        }
        .hsrc-ticket-container [contenteditable="true"]:focus {
            background-color: rgba(255, 255, 255, 0.3);
            box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.5);
        }
        #hsrc-ticket .absolute { position: absolute; } /* Ensure absolute positioning works */
        #hsrc-ticket #ticket-id { top: 7%; left: 7.5%; font-size: 2.2vw; color: #D94A55; }
        #hsrc-ticket #check-in-gate { top: 7.5%; left: 70%; font-size: 2vw; color: #333; font-weight: 500;}
        #hsrc-ticket #from-station { top: 18%; left: 12%; font-size: 4vw; color: #000; font-weight: bold; }
        #hsrc-ticket #to-station { top: 18%; left: 65%; font-size: 4vw; color: #000; font-weight: bold; }
        #hsrc-ticket #from-station-pinyin { top: 28%; left: 15%; font-size: 2vw; color: #333; }
        #hsrc-ticket #to-station-pinyin { top: 28%; left: 70%; font-size: 2vw; color: #333; }
        #hsrc-ticket #departure-datetime { top: 35%; left: 7.5%; font-size: 2vw; color: #000; }
        #hsrc-ticket #seat-info { top: 35%; left: 70%; font-size: 2vw; color: #000; }
        #hsrc-ticket #price { top: 45%; left: 7.5%; font-size: 2.5vw; color: #D94A55; }
        #hsrc-ticket #seat-class { top: 45%; left: 70%; font-size: 2.5vw; color: #000; font-weight: bold; }
        #hsrc-ticket #id-number { top: 61%; left: 7.5%; font-size: 2vw; color: #000; letter-spacing: 0.1em; }
        #hsrc-ticket #bottom-code { top: 95%; left: 7.5%; font-size: 1.8vw; color: #000; letter-spacing: 0.1em; transform: translateY(-50%);}
        #hsrc-ticket #check-in-gate, #hsrc-ticket #id-number, #hsrc-ticket #reimbursement-info, #hsrc-ticket #from-station-pinyin, #hsrc-ticket #to-station-pinyin, #hsrc-ticket #bottom-code {
            font-family: 'Songti SC', 'STSong', 'SimSun', serif;
        }
        .hsrc-ticket-container .number {
            font-weight: 700; font-size: 1.1em; vertical-align: baseline;
        }
        .hsrc-ticket-container .passenger-name {
            font-weight: 700;
        }
        #hsrc-ticket #train-info-container {
            position: absolute; top: 18%; left: 42%; width: 14%; display: flex; flex-direction: column; align-items: center;
        }
        #hsrc-ticket #train-number { font-size: 3.5vw; color: #000; }
        #hsrc-ticket #train-arrow-svg-container { width: 100%; height: 3vw; }
        #hsrc-ticket .train-arrow-svg { width: 100%; height: 100%; }
        #hsrc-ticket #reimbursement-info {
            position: absolute; top: 68%; left: 7.5%; width: 55%; border: 1.5px dashed #333; padding: 1.2%; font-size: 2vw; text-align: center; line-height: 1.5; color: #333;
        }
        #hsrc-ticket #qrcode-container {
            position: absolute; top: 59%; left: 70%; width: 20%; height: 25%; display: flex; align-items: center; justify-content: center;
        }
        @media (min-width: 800px) {
            #hsrc-ticket #ticket-id { font-size: 18px; }
            #hsrc-ticket #check-in-gate { font-size: 16px; }
            #hsrc-ticket #from-station, #hsrc-ticket #to-station { font-size: 32px; }
            #hsrc-ticket #train-number { font-size: 28px; }
            #hsrc-ticket #from-station-pinyin, #hsrc-ticket #to-station-pinyin { font-size: 16px; }
            #hsrc-ticket #departure-datetime, #hsrc-ticket #seat-info, #hsrc-ticket #id-number { font-size: 16px; }
            #hsrc-ticket #price, #hsrc-ticket #seat-class { font-size: 20px; }
            #hsrc-ticket #bottom-code { font-size: 14px; }
            #hsrc-ticket #reimbursement-info { font-size: 16px; }
            #hsrc-ticket #train-arrow-svg-container { height: 24px; }
        }

        /* --- Boarding Pass Styles --- */
        .boarding-pass-container {
            position: relative;
            width: 100%;
            max-width: 1000px;
            margin: 0 auto;
            aspect-ratio: 1000 / 450;
            background-color: #ffffff;
            box-shadow: 0 10px 30px rgba(0,0,0,0.1);
            border-radius: 16px;
            overflow: hidden;
            display: flex;
            flex-direction: column;
        }
        .bp-header {
            flex-basis: 20%;
            background-color: rgb(35, 170, 242);
            color: white;
            display: flex;
            align-items: center;
            padding: 0 3%;
            position: relative;
        }
        .bp-body {
            flex-basis: 80%;
            background-color: #ffffff;
            display: flex;
        }
        .bp-main-info {
            flex-grow: 1;
            padding: 2% 3%;
            display: flex;
            flex-direction: column;
        }
        .bp-stub {
            width: 14%;
            flex-shrink: 0;
            border-left: 2px dashed #cccccc;
            padding: 2% 1.5%;
            display: flex;
            flex-direction: column;
        }
        .bp-header-stubs {
            position: absolute;
            right: 0;
            top: 0;
            height: 100%;
            width: 28%; /* Match the two .bp-stub widths */
            display: flex;
            align-items: center;
        }
        .bp-header .bp-stub-header {
            flex: 1; /* Each takes 50% of the container */
            padding: 0 1.5%;
            text-align: center;
        }
        .bp-label {
            font-size: 0.8em; color: #555; text-transform: uppercase;
        }
        .bp-value {
            font-size: 1.2em; font-weight: bold; color: #111;
        }
        .barcode-container {
            height: 40px;
        }
        .barcode-number {
            font-family: 'Courier New', Courier, monospace;
            letter-spacing: 2px;
            font-size: 0.9em;
            text-align: left; /* Align number to the left */
            margin-top: 4px;
        }
        /* Tailwind CSS will handle the rest of the boarding pass styles */
    </style>
    </head>
<body>
    <header>
        <div class="header-area header-transparent">
            <div class="main-header header-sticky">
                <div class="container-fluid">
                    <div class="row">
                        <div class="col-xl-12">
                            <div class="d-flex justify-content-between flex-wrap align-items-center">
                                <div class="logo">
                                    <a href="index.html"><img src="assets/img/logo/logo.png" alt=""></a>
                                </div>
                                <div class="main-menu d-none d-lg-block text-center">
                                    <nav>
                                        <ul id="navigation">
                                            <li><a href="index.html">Home</a></li>
                                            <li><a href="photo.html">Photo</a></li>
                                            <li><a href="journey.html">Journey</a></li>
                                            <li><a href="mood.html">Mood</a></li>
                                            <li><a href="tool.html">Tool</a></li>
                                        </ul>
                                    </nav>
                                </div>
                            </div>
                        </div>
                        <div class="col-12">
                            <div class="mobile_menu d-block d-lg-none"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </header>
    <main>
        <div class="slider-area">
            <div class="single-slider slider-bg4 hero-overly slider-height2 d-flex align-items-end">
                <div class="container">
                    <div class="row">
                        <div class="col-xxl-12">
                            <div class="hero-caption hero-caption2 text-center">
                                <p>Explore</p>
                                <div class="generator-title" style="font-family: 'Microsoft YaHei', 'SimHei', '黑体', sans-serif !important; font-size: 1.75rem !important; font-weight: bold !important; text-align: center !important; color: #ffffff !important; margin-bottom: 0.5rem !important;">旅途的票根写下了谁的青春</div>
                                <h2></h2>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div id="ticket-generator-wrapper" class="container" style="padding-top: 50px; padding-bottom: 50px;">
            <div class="generator-section">
                <div class="generator-title" style="font-family: 'Microsoft YaHei', 'SimHei', '黑体', sans-serif !important; font-size: 1.75rem !important; font-weight: bold !important; text-align: center !important; color: #334155 !important; margin-bottom: 0.5rem !important;">高铁票根生成器</div>
                <p class="generator-subtitle">（点击票面上的文字即可在线编辑）</p>
                <div id="hsrc-ticket" class="hsrc-ticket-container">
                    <div id="ticket-id" contenteditable="true" class="absolute"><span class="number">S1016185</span></div>
                    <div id="check-in-gate" contenteditable="true" class="absolute">检票: <span class="number">10A 10B</span></div>
                    <div id="from-station" contenteditable="true" class="absolute">成都东站</div>

                    <div id="train-info-container">
                        <div id="train-number" contenteditable="true"><span class="number">G8235</span></div>
                        <div id="train-arrow-svg-container">
                            <svg class="train-arrow-svg" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg">
                                <path d="M50 512 L974 512 L904 442" fill="none" stroke="#444444" stroke-width="50"></path>
                            </svg>
                        </div>
                    </div>

                    <div id="to-station" contenteditable="true" class="absolute">西安北站</div>
                    <div id="from-station-pinyin" contenteditable="true" class="absolute">ChengduDong</div>
                    <div id="to-station-pinyin" contenteditable="true" class="absolute">Xi'an Bei</div>
                    <div id="departure-datetime" contenteditable="true" class="absolute"><span class="number">2025</span>年<span class="number">9</span>月<span class="number">1</span>日 <span class="number">13:14</span> 开</div>
                    <div id="seat-info" contenteditable="true" class="absolute"><span class="number">10</span>车 <span class="number">16F</span>号</div>
                    <div id="price" contenteditable="true" class="absolute">¥<span class="number">516.0</span>元</div>
                    <div id="seat-class" contenteditable="true" class="absolute">商务座</div>
                    <div id="id-number" contenteditable="true" class="absolute"><span class="number">1101002045****6185</span> <strong class="passenger-name">周末</strong></div>
                    <div id="reimbursement-info" contenteditable="true" class="absolute">
                        报销凭证 遗失不补<br>退票改签时须交回车站
                    </div>
                    <div id="bottom-code" contenteditable="true" class="absolute"><span class="number">1001101620453E1016185 JM</span></div>

                    <div id="qrcode-container">
                        <div id="qrcode-hsrc"></div>
                    </div>
                </div>
                <div class="mt-8 text-center">
                    <button id="downloadBtn-hsrc" class="bg-blue-500 hover:bg-blue-600 text-white font-bold py-3 px-6 rounded-lg shadow-lg transition-transform transform hover:scale-105">下载高铁票票根</button>
                </div>
            </div>

            <div class="generator-section">
                <div class="generator-title" style="font-family: 'Microsoft YaHei', 'SimHei', '黑体', sans-serif !important; font-size: 1.75rem !important; font-weight: bold !important; text-align: center !important; color: #334155 !important; margin-bottom: 0.5rem !important;">飞机票根生成器</div>
                <p class="generator-subtitle">（点击票面上的文字即可在线编辑）</p>
                <div id="boarding-pass" class="boarding-pass-container">
                    <div class="bp-header">
                        <svg viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" width="50" class="h-auto">
                            <path d="M512 32c262.4 0 480 217.6 480 480s-217.6 480-480 480S32 774.4 32 512C38.4 249.6 249.6 32 512 32zM243.2 217.6s0-19.2 12.8-25.6c0 0 0-12.8 6.4-19.2 0 0 32-38.4 96-51.2 0 0 44.8-6.4 83.2 6.4v-25.6s6.4-6.4 12.8-6.4h12.8v-12.8s-6.4-6.4-6.4 0h-6.4s6.4-12.8 25.6-12.8c0 0 12.8 0 12.8 25.6 0 0-6.4 12.8-19.2 19.2 0 0-6.4 0-12.8-6.4 0 0 0-6.4-6.4-6.4 0 0-12.8 0-12.8 12.8 0 0 0 12.8 19.2 12.8 0 0 12.8 6.4 32-12.8 0 0 6.4-6.4 6.4-19.2 6.4-6.4 12.8-32 38.4-32 0 0 19.2 0 32 6.4 0 0-25.6 0-25.6 12.8 0 0-6.4 12.8 6.4 12.8 0 0 25.6-12.8 44.8 0l25.6 12.8 12.8-6.4s12.8-12.8 12.8 0c0 0 6.4 12.8 25.6 19.2l64 44.8s6.4 6.4 6.4 0c0 0 6.4-19.2 19.2-19.2 0 0 12.8 0 19.2 12.8 0 0 6.4 12.8-6.4 19.2 0 0-6.4 0-12.8-6.4 0 0 0-6.4 0 0 0 0 6.4 6.4 6.4 0 0 0 0-6.4-12.8-12.8 0 0-12.8 0-12.8 12.8 0 0 0 12.8 19.2 25.6 0 0 6.4 0 12.8-6.4 0 0 0 12.8-12.8 12.8 0 0-6.4 0-12.8-6.4 0 0-6.4-6.4-6.4 6.4 0 0 0 12.8 25.6 12.8 0 0 6.4 12.8-19.2 6.4 0 0-19.2-6.4-19.2-25.6v-12.8s0-6.4-6.4-6.4l-89.6-64s-6.4-6.4-25.6 0c0 0-44.8 19.2-83.2 6.4 0 0-25.6 38.4-57.6 32 0 0-19.2 0-38.4-19.2 0 0-19.2-19.2-64-12.8 0 0-38.4 6.4-70.4 38.4 0 0-12.8 32-32 32-12.8 0-19.2 25.6-19.2 25.6z m-19.2 563.2s-19.2 0-25.6-12.8c0 0-12.8 0-19.2-6.4 0 0-38.4-32-51.2-96 0 0-6.4-44.8 6.4-83.2h-25.6s-6.4 0-6.4-12.8v-12.8h-12.8s-6.4 0 0 6.4v6.4s-12.8-6.4-12.8-25.6c0 0 0-12.8 25.6-12.8 0 0 12.8 6.4 19.2 19.2 0 0 0 6.4-6.4 12.8 0 0-6.4 0-6.4 6.4 0 0 0 12.8 12.8 12.8 0 0 12.8 0 12.8-19.2 0 0 6.4-12.8-12.8-32 0 0-6.4-6.4-19.2-6.4 0 0-25.6-6.4-25.6-32 0 0 0-19.2 6.4-32 0 0 0 25.6 12.8 25.6 0 0 12.8 6.4 12.8-6.4 0 0-12.8-25.6 0-44.8l12.8-25.6-6.4-12.8s-12.8-12.8 0-12.8c0 0 12.8-6.4 19.2-25.6l44.8-64s6.4-6.4 0-6.4c0 0-19.2-6.4-19.2-19.2 0 0 0-12.8 12.8-19.2 0 0 12.8-6.4 19.2 6.4 0 0 0-6.4-6.4-12.8 0 0-6.4 0 0 0 0 0 6.4-6.4 0-6.4 0 0-6.4 0-12.8 12.8 0 0 0 12.8 12.8 12.8 0 0 12.8 0 25.6-19.2 0 0 0-6.4-6.4-12.8 0 0 12.8 0 12.8 12.8 0 0 0-6.4-6.4-12.8 0 0-6.4 6.4 6.4 6.4 0 0 12.8 0 12.8-25.6 0 0 12.8-6.4 6.4 19.2 0 0-6.4 19.2-25.6 19.2h-12.8s-6.4 0-6.4 6.4L121.6 390.4s-6.4 6.4 0 25.6c0 0 19.2 44.8 6.4 83.2 0 0 38.4 25.6 32 57.6 0 0 0 19.2-19.2 38.4 0 0-19.2 19.2-12.8 64 0 0 6.4 38.4 38.4 70.4 0 0 32 12.8 32 32 0 12.8 25.6 19.2 25.6 19.2z m563.2 25.6s0 19.2-12.8 25.6c0 0 0 12.8-6.4 19.2 0 0-32 38.4-96 51.2 0 0-44.8 6.4-83.2-6.4v25.6s-6.4 6.4-12.8 6.4h-12.8v12.8s6.4 6.4 6.4 0H576s-6.4 12.8-25.6 12.8c0 0-12.8 0-6.4-25.6 0 0 6.4-12.8 19.2-19.2 0 0 6.4 0 12.8 6.4 0 0 0 6.4 6.4 6.4 0 0 12.8 0 12.8-12.8 0 0 0-12.8-19.2-12.8 0 0-12.8-6.4-32 12.8 0 0-6.4 6.4-6.4 19.2 0 0-6.4 25.6-32 25.6 0 0-19.2 0-32-6.4 0 0 25.6 0 25.6-12.8 0 0 6.4-12.8-6.4-12.8 0 0-25.6 12.8-44.8 0l-25.6-12.8-12.8 6.4s-12.8 12.8-12.8 0c0 0-6.4-12.8-25.6-19.2l-64-44.8s-6.4-6.4-6.4 0c0 0-6.4 19.2-19.2 19.2 0 0-12.8 0-19.2-12.8 0 0-6.4-12.8 6.4-19.2 0 0 6.4 0 12.8 6.4 0 0 0 6.4 0 0 0 0-6.4-6.4-6.4 0 0 0 0 6.4 12.8 12.8 0 0 12.8 0 12.8-12.8 0 0 0-12.8-19.2-25.6 0 0-6.4 0-12.8 6.4 0 0 0-12.8 12.8-12.8 0 0 6.4 0 12.8 6.4 0 0 6.4 6.4 6.4-6.4 0 0 0-12.8-25.6-12.8 0 0-6.4-12.8 19.2-6.4 0 0 19.2 6.4 19.2 25.6v12.8s0 6.4 6.4 6.4l83.2 57.6s6.4 6.4 25.6 0c0 0 44.8-19.2 83.2-6.4 0 0 25.6-38.4 57.6-32 0 0 19.2 0 38.4 19.2 0 0 19.2 19.2 64 12.8 0 0 38.4-6.4 70.4-38.4 0 0 12.8-32 32-32 0 6.4 12.8-12.8 12.8-12.8z m12.8-563.2s19.2-6.4 25.6 12.8c0 0 12.8 0 19.2 6.4 0 0 38.4 25.6 57.6 96 0 0 12.8 44.8 0 83.2 0 0 19.2-6.4 25.6 0 0 0 6.4 0 6.4 12.8v12.8h12.8s6.4-6.4 0-6.4v-6.4s12.8 6.4 12.8 19.2c0 0 0 12.8-25.6 12.8 0 0-12.8 0-19.2-12.8 0 0 0-6.4 6.4-12.8 0 0 6.4 0 6.4-6.4 0 0 0-12.8-12.8-12.8 0 0-12.8 0-12.8 19.2 0 0-6.4 12.8 12.8 32 0 0 6.4 6.4 19.2 6.4 0 0 25.6 6.4 25.6 25.6 0 0 6.4 19.2-6.4 32 0 0 0-25.6-12.8-25.6 0 0-12.8-6.4-12.8 6.4 0 0 12.8 25.6 0 44.8 0 0-6.4 12.8-6.4 32l6.4 12.8s12.8 12.8 0 12.8c0 0-12.8 6.4-19.2 25.6l-44.8 64s-6.4 6.4 6.4 6.4c0 0 19.2 6.4 19.2 19.2 0 0 0 12.8-12.8 19.2 0 0-12.8 6.4-19.2-6.4 0 0 0-6.4 6.4-12.8 0 0 6.4 0 0 0 0 0-6.4 6.4 0 6.4 0 0 6.4 0 6.4-12.8 0 0 0-12.8-12.8-12.8 0 0-19.2 0-19.2 19.2 0 0 0 6.4 6.4 12.8 0 0-12.8 0-12.8-12.8 0 0 0-6.4 6.4-12.8 0 0 0-6.4-6.4-6.4 0 0-12.8 0-12.8 25.6 0 0-12.8 6.4-6.4-19.2 0 0 6.4-19.2 25.6-19.2h12.8s6.4 0 6.4-6.4l51.2-89.6s6.4-6.4 0-25.6c0 0-19.2-38.4-12.8-76.8 0 0-38.4-25.6-38.4-57.6 0 0-6.4-19.2 19.2-38.4 0 0 19.2-19.2 6.4-64 0 0-6.4-38.4-38.4-64 0 0-32-6.4-32-32 12.8-19.2-12.8-25.6-12.8-25.6z m-441.6-19.2s83.2 0 147.2 51.2h-6.4s-147.2-57.6-262.4 57.6c0 0 89.6-44.8 160-25.6l-6.4 12.8S236.8 326.4 192 505.6c0 0 70.4-96 128-102.4l-6.4 6.4s-134.4 89.6-83.2 262.4c0 0 6.4-102.4 57.6-160 0 0-70.4 140.8 57.6 281.6 0 0-51.2-108.8-25.6-172.8 0 0 0 166.4 185.6 211.2 0 0-89.6-64-102.4-134.4 0 0 83.2 140.8 268.8 89.6 0 0-115.2-6.4-160-64 0 0 140.8 76.8 275.2-51.2 0 0-108.8 44.8-166.4 19.2 0 0 160 0 211.2-185.6 0 0-64 96-128 102.4 0 0 140.8-102.4 89.6-268.8 0 0 0 89.6-57.6 153.6 0 0 64-160-64-275.2 0 0 44.8 76.8 25.6 166.4 0 0-12.8-172.8-192-204.8 0 0 89.6 57.6 102.4 121.6-102.4-128-249.6-76.8-249.6-76.8z" fill="#E5B000"></path>
                        </svg>
                        <div class="ml-4 flex flex-col flex-shrink-0 relative bottom-1">
                            <div class="text-2xl font-bold leading-tight" contenteditable="true">登机牌</div>
                            <div class="text-base leading-tight whitespace-nowrap" contenteditable="true">BOARDING PASS</div>
                        </div>
                        
                        <div class="bp-header-stubs">
                            <div class="bp-stub-header">
                                <div class="font-bold" contenteditable="true">① 登机牌</div>
                                <div class="text-xs" contenteditable="true">BOARDING PASS</div>
                            </div>
                            <div class="w-px h-2/3 bg-white/50"></div>
                            <div class="bp-stub-header">
                                <div class="font-bold" contenteditable="true">② 登机牌</div>
                                <div class="text-xs" contenteditable="true">BOARDING PASS</div>
                            </div>
                        </div>
           <div class="bp-body"></div>             </div>
                    <div class="bp-body">
                        <div class="bp-main-info">
                            <div class="mb-6"><div class="bp-label">姓名 NAME</div><div class="bp-value text-2xl" contenteditable="true">周末/Mo Zhou</div></div>
                            <div class="flex justify-between mb-8">
                                <div><div class="bp-label">目的地 DEST</div><div class="bp-value" contenteditable="true">BEIJING</div></div>
                                <div><div class="bp-label">航班号 FLIGHT</div><div class="bp-value" contenteditable="true">CA1989</div></div>
                                <div><div class="bp-label">日期 DATE</div><div class="bp-value" contenteditable="true">28AUG</div></div>
                                <div><div class="bp-label">座位号 SEAT</div><div class="bp-value" contenteditable="true">10A</div></div>
                            </div>
                            <hr class="border-gray-300 my-2">
                            <div class="flex justify-between items-center mt-2 mb-4">
                                <div><div class="bp-label">登机时间 BD TIME</div><div class="bp-value" contenteditable="true">10:20</div></div>
                                <div><div class="bp-label">登机口 GATE</div><div class="bp-value" contenteditable="true">C35</div></div>
                                <div class="text-sm text-gray-600" contenteditable="true">登机口可能变更, 请注意<br>广播或登机口提示信息</div>
                            </div>
                            <div>
                                <div class="bp-label mb-2">ETKT</div>
                                <div class="barcode-container">
                                    <svg id="barcode"></svg>
                                </div>
                                <div id="barcode-number" class="barcode-number" contenteditable="true">2020090520270601</div>
                            </div>
                        </div>
                        <div class="bp-stub">
                            <div class="flex flex-col justify-between h-full">
                                <div><div class="bp-label">FLIGHT</div><div class="bp-value text-lg" contenteditable="true">CA1989</div></div>
                                <div><div class="bp-label">DATE</div><div class="bp-value text-lg" contenteditable="true">28AUG</div></div>
                                <div><div class="bp-label">START</div><div class="bp-value text-lg" contenteditable="true">SHANGHAI</div></div>
                                <div><div class="bp-label">SEAT</div><div class="bp-value text-lg" contenteditable="true">10A</div></div>
                                <div><div class="bp-label">ETKT</div><div class="bp-value text-lg" contenteditable="true">0755361</div></div>
                            </div>
                        </div>
                        <div class="bp-stub">
                            <div class="flex flex-col justify-between h-full">
                                <div><div class="bp-label">FLIGHT</div><div class="bp-value text-lg" contenteditable="true">CA1989</div></div>
                                <div><div class="bp-label">DATE</div><div class="bp-value text-lg" contenteditable="true">28AUG</div></div>
                                <div><div class="bp-label">DEST</div><div class="bp-value text-lg" contenteditable="true">BEIJING</div></div>
                                <div><div class="bp-label">SEAT</div><div class="bp-value text-lg" contenteditable="true">10A</div></div>
                                <div><div class="bp-label">ETKT</div><div class="bp-value text-lg" contenteditable="true">0755361</div></div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="mt-8 text-center">
                    <button id="downloadBtn-bp" class="bg-blue-600 hover:bg-blue-700 text-white font-bold py-3 px-6 rounded-lg shadow-lg transition-transform transform hover:scale-105">下载登机牌票根</button>
                </div>
            </div>

             <footer class="text-center text-gray-400 my-8 text-sm">
                <p>免责声明：本工具仅供个人娱乐和学习使用，请勿用于任何非法用途。</p>
            </footer>
        </div>
        </main>
    <footer>
        <div class="footer-area footer-padding">
            <div class="footer-wrapper ">
                <div class="container">
                    <div class="row d-flex justify-content-between">
                        <div class="col-xl-3 col-lg-4 col-md-6 col-sm-6">
                            <div class="single-footer-caption mb-50">
                                <div class="single-footer-caption mb-30">
                                    <div class="footer-logo mb-25">
                                        <a href="index.html"><img src="assets/img/logo/logo2_footer.png" alt=""></a>
                                    </div>
                                    <div class="footer-tittle">
                                        <div class="footer-pera">
                                            <p>出现的每一天 都是值得被收藏的一天</p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="offset-xl-1 col-xl-2 col-lg-2 col-md-4 col-sm-5">
                            <div class="single-footer-caption mb-50">
                                <div class="footer-tittle">
                                    <h4>Navigation</h4>
                                    <ul>
                                        <li><a href="#">Home</a></li>
                                        <li><a href="#">About</a></li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                        <div class="col-xl-2 col-lg-2 col-md-4 col-sm-5">
                            <div class="single-footer-caption mb-50">
                                <div class="footer-tittle">
                                    <h4>Contact</h4>
                                    <ul>
                                        <li><a href="#">Xi'an, China</a></li>
                                        <li class="number2"><a href="#">???????????????@qq.com</a></li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                </div>
        </div>
    </footer>
    <div id="back-top">
        <a class="wrapper" title="Go to Top" href="#">
            <div class="arrows-container">
                <div class="arrow arrow-one"></div>
                <div class="arrow arrow-two"></div>
            </div>
        </a>
    </div>

    <script src="./assets/js/vendor/modernizr-3.5.0.min.js"></script>
    <script src="./assets/js/vendor/jquery-1.12.4.min.js"></script>
    <script src="./assets/js/popper.min.js"></script>
    <script src="./assets/js/bootstrap.min.js"></script>
    <script src="./assets/js/owl.carousel.min.js"></script>
    <script src="./assets/js/slick.min.js"></script>
    <script src="./assets/js/jquery.slicknav.min.js"></script>
    <script src="./assets/js/hover-direction-snake.min.js"></script>
    <script src="./assets/js/wow.min.js"></script>
    <script src="./assets/js/jquery.magnific-popup.js"></script>
    <script src="./assets/js/jquery.nice-select.min.js"></script>
    <script src="./assets/js/jquery.counterup.min.js"></script>
    <script src="./assets/js/waypoints.min.js"></script>
    <script src="./assets/js/contact.js"></script>
    <script src="./assets/js/jquery.form.js"></script>
    <script src="./assets/js/jquery.validate.min.js"></script>
    <script src="./assets/js/mail-script.js"></script>
    <script src="./assets/js/jquery.ajaxchimp.min.js"></script>
    <script src="./assets/js/plugins.js"></script>
    <script src="./assets/js/main.js"></script>
    
    <script>
        // --- QR Code for High-Speed Rail Ticket ---
        const hsrcQrCode = new QRCode(document.getElementById('qrcode-hsrc'), {
            text: "我不适合做墨守成规的孩子，想做游历天下的徐霞客",
            width: 128, height: 128, colorDark : "#000000", colorLight : "#ffffff", correctLevel : QRCode.CorrectLevel.H
        });

        // --- Real, Dynamic Barcode for Boarding Pass ---
        const barcodeNumberInput = document.getElementById('barcode-number');

        function generateBarcode() {
            const barcodeValue = barcodeNumberInput.textContent;
            if (barcodeValue) {
                try {
                    JsBarcode("#barcode", barcodeValue, {
                        format: "CODE128",
                        height: 40,
                        displayValue: false,
                        margin: 0
                    });
                } catch (e) {
                    // Handle invalid input for barcode
                    console.error("Invalid barcode value:", e);
                    // Clear the barcode area if input is not valid
                    document.getElementById('barcode').innerHTML = '';
                }
            }
        }
        
        // Add event listener to update barcode when the number is edited
        barcodeNumberInput.addEventListener('input', generateBarcode);

        // --- Download Functionality ---
        function setupDownload(buttonId, ticketId, filename) {
            const downloadBtn = document.getElementById(buttonId);
            const ticketElement = document.getElementById(ticketId);
            if (!downloadBtn || !ticketElement) return;

            downloadBtn.addEventListener('click', () => {
                html2canvas(ticketElement, { useCORS: true, scale: 2 })
                .then(canvas => {
                    const link = document.createElement('a');
                    link.download = filename;
                    link.href = canvas.toDataURL('image/png');
                    link.click();
                }).catch(err => {
                    console.error("生成图片失败!", err);
                    alert("抱歉，生成图片时出错。请检查浏览器控制台获取更多信息。");
                });
            });
        }

        // We need to wait for the whole page to be ready
        // Using a small timeout to ensure all elements are rendered
        setTimeout(() => {
            setupDownload('downloadBtn-hsrc', 'hsrc-ticket', 'high-speed-rail-ticket.png');
            setupDownload('downloadBtn-bp', 'boarding-pass', 'boarding-pass.png');
            // Ensure barcode is generated after everything is loaded
            generateBarcode();
        }, 100);
    </script>
    </body>
</html>